<template>
  <div class="top-header">
    <div class="top-header-left">
      <div class="left-back">
        <img src="@/assets/image/homeView/back-icon.png" alt="">
      </div>
      <div class="left-list">
        <div class="left-list-video">
          <img src="@/assets/image/homeView/trumpet-icon.png" alt="">
          <p>视频</p>
        </div>
        <div class="left-list-specialist">
          <img src="@/assets/image/homeView/specialist-icon.png" alt="">
          <p>专家列表</p>
        </div>
      </div>
    </div>
    <div class="top-header-center">
      <div class="center-content">
        <img src="@/assets/image/homeView/evaluationing-icon.png" alt="">
        <span class="gradient-text">评标中</span>
        <el-progress :percentage="60" :stroke-width="14" status="success" text-inside>
          <span>3/5</span>
        </el-progress>
      </div>
      <div class="center-content">
        <img src="@/assets/image/homeView/complete-icon.png" alt="">
        <span class="gradient-text">完成签字</span>
        <el-progress :percentage="80" :stroke-width="14" status="success" text-inside>
          <span>4/5</span>
        </el-progress>
      </div>
    </div>
    <div class="top-header-right">
      <el-tooltip class="box-item" effect="dark" content="默认视角" placement="bottom">
        <div @click="defaultClick">
          <img src="../../assets/image/homeView/default-perspective-icon.png" alt="">
          <span>默认视角</span>
        </div>
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="切换标段" placement="bottom">
        <div @click="dialogVisible = !dialogVisible">
          <img src="../../assets/image/homeView/switchover-icon.png" alt="">
          <span>切换标段</span>
        </div>
      </el-tooltip>
      <el-tooltip class="box-item" effect="dark" content="二维视图" placement="bottom">
        <div @click="">
          <img src="../../assets/image/homeView/2D-icon.png" alt="">
          <span>二维视图</span>
        </div>
      </el-tooltip>
    </div>
  </div>
  <div class="features">
    <div class="features-item" v-for="(item,index) in featuresList" :key="index">
      <img :src=item.url alt="">
      <p>{{ item.name }}</p>
    </div>
  </div>
  <img class="chatIcon" src="@/assets/image/homeView/chat-icon.png" alt="" v-show="!isChat" @click="isChat = !isChat">
  <div class="chat" v-show="isChat">
    <div class="left-back" @click="isChat = !isChat">
      <img src="@/assets/image/homeView/back-icon.png" alt="">
    </div>
    <div class="chat-content">
      <div class="chat-list">
        <p v-for="(item,index) in chatList" :key="index">
          <span>{{ item.name }}</span>
          <span>{{ item.content }}</span>
        </p>
      </div>
      <div class="chat-input">
        <el-input placeholder="请输入内容">
          <template v-slot:prefix>
            <img src="@/assets/image/homeView/Component 24-5.png" alt="" style="width: 24px">
          </template>
        </el-input>
        <img class="chat-send" src="@/assets/image/homeView/send-icon.png" alt="">
      </div>
    </div>
  </div>
  <div class="message">
    <p v-for="(item,index) in chatList" :key="index">
      <span>{{ item.name }}</span>
      <span>{{ item.content }}</span>
    </p>
  </div>
  <el-dialog class="dialog" v-model="dialogVisible" width="900" :before-close="handleClose" append-to-body>
    <div class="dialog-search">
      <el-input v-model="input4" style="width: 240px" clearable>
        <template #prefix>
          <el-icon class="el-input__icon">
            <search />
          </el-icon>
        </template>
      </el-input>
      <el-button @click="dialogVisible = false">查询</el-button>
      <el-button type="primary" @click="dialogVisible = false">
        重置
      </el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="xuhao" label="序号" width="180" align="center" />
      <el-table-column prop="date" label="评标会议编号" width="180" align="center" />
      <el-table-column prop="name" label="标段（包）编号" align="center" />
      <el-table-column prop="address" label="标段（包）名称" align="center" />
    </el-table>
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount, defineEmits } from 'vue';
import { useMeshEditStore } from "@/store/meshEditStore";
const emit = defineEmits(['editConfirm'])
const store = useMeshEditStore();
const isChat = ref(false)
const dialogVisible = ref(false)
const timer = ref()
const date = ref("")//年月日
const moreTime = ref("")//时分秒
const input4 = ref("")
const tableData = [
  {
    xuhao: '1',
    date: '内容字段',
    name: '内容字段',
    address: '南京大学物理学院装修项目（标段1）',
  },
  {
    xuhao: '2',
    date: '内容字段',
    name: '内容字段',
    address: '南京大学物理学院装修项目（标段1）',
  },
  {
    xuhao: '3',
    date: '内容字段',
    name: '内容字段',
    address: '南京大学物理学院装修项目（标段1）',
  },
  {
    xuhao: '4',
    date: '内容字段',
    name: '内容字段',
    address: '南京大学物理学院装修项目（标段1）',
  },
  {
    xuhao: '5',
    date: '内容字段',
    name: '内容字段',
    address: '南京大学物理学院装修项目（标段1）',
  },
]
const featuresList = ref([
  { url: new URL('@/assets/image/homeView/leave-icon.png', import.meta.url).href, name: '离开会议' },
  { url: new URL('@/assets/image/homeView/Group 1912056038.png', import.meta.url).href, name: '结束会议' },
  { url: new URL('@/assets/image/homeView/Group 1912056042.png', import.meta.url).href, name: '演示' },
  { url: new URL('@/assets/image/homeView/Group 1912056046.png', import.meta.url).href, name: '举手' },
  { url: new URL('@/assets/image/homeView/Subtract.png', import.meta.url).href, name: '询标' },
  { url: new URL('@/assets/image/homeView/Group 1912056061.png', import.meta.url).href, name: '视频' },
  { url: new URL('@/assets/image/homeView/Component 24.png', import.meta.url).href, name: '麦克风' },
  { url: new URL('@/assets/image/homeView/Component 25.png', import.meta.url).href, name: '取消主持' },
])
const chatList = ref([
  { name: '钱亮：', content: '10万吨级的“海上粮仓”，到底有多厉害？' },
  { name: '周晟：', content: '中国正能量，为奋进的中国吹响号角' },
  { name: '郑文鉴：', content: '10万吨级的“海上粮仓”，到底有多厉害？' },
  {
    name: '钱品妍：',
    content: '无人机全程拍摄！时隔三十多年再探切尔诺贝利核电站 如今变成什么样,无人机全程拍摄！时隔三十多年再探切尔诺贝利核电站 如今变成什么样'
  },
  { name: '赵家宝：', content: '福建文化遗产，你知道多少？' },
])
const defaultClick = () => {
  emit('editConfirm')
}
onMounted(() => {
  //创建定时器1秒执行一次
  timer.value = setInterval(() => {
    formateDate()
  }, 1000)
})
//取消定时器
onBeforeUnmount(() => {
  clearInterval(timer.value) //清除定时器
})
//获取当前时间
const formateDate = () => {
  const time = new Date()
  const year = time.getFullYear()
  const month = complement(time.getMonth() + 1)
  const day = complement(time.getDate())
  const hour = complement(time.getHours())
  const minute = complement(time.getMinutes())
  const second = complement(time.getSeconds())
  moreTime.value = `${hour}:${minute}:${second}`
  date.value = `${year}.${month}.${day}`
}
const deleteZJ = () => {
  store.modelApi.deleteZJ();
  alert("删除成功")
}
//当时间为个位数的时候，在数字前加0
const complement = (value) => {
  return value < 10 ? `0${value}` : value.toString()
}
</script>
<style scoped lang="scss">
html,
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.top-header {
  width: 100%;
  height: 72px;
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(180deg, #181818 0%, rgba(24, 24, 24, 0.55) 54.21%, rgba(24, 24, 24, 0) 100%);
  .top-header-left {
    height: 100%;
    display: flex;
    .left-back {
      width: 160px;
      height: 100%;
      background: url(@/assets/image/homeView/back-bg-img.png) no-repeat 100% 100%;
      background-size: cover;
      cursor: pointer;
      img {
        width: 86px;
        margin-left: 10px;
        margin-top: 8px;
      }
    }
    .left-list {
      display: flex;
      align-items: center;
      .left-list-video,
      .left-list-specialist {
        margin-left: 26px;
        width: 48px;
        height: 48px;
        background: url(@/assets/image/homeView/bg-circle-icon.png) no-repeat 100% 100%;
        background-size: cover;
        position: relative;
        img {
          width: 48px;
          position: absolute;
          top: -4px;
        }
        p {
          position: absolute;
          bottom: -2px;
          left: 8px;
          color: rgba(191, 193, 197, 1);
          font-size: 16px;
        }
      }
      .left-list-specialist {
        img {
          width: 38px;
          left: 5px;
        }
        p {
          width: 66px;
          left: -6px;
        }
      }
    }
  }
  .top-header-center {
    height: 72px;
    line-height: 72px;
    text-align: center;
    display: flex;
    .center-content {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 40px;
      }
      .gradient-text {
        margin-right: 10px;
        background-image: -webkit-linear-gradient(-90deg, #ffffff 39.25%, #2f5bf6 130.65%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      :deep(.el-progress) {
        width: 200px;
      }
      :deep(.el-progress-bar__outer) {
        position: static;
        background-color: rgba(100, 102, 107, 1);
        .el-progress-bar__inner {
          position: static;
          .el-progress-bar__innerText {
            font-size: 20px;
            font-family: Alimama ShuHeiTi;
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
      }
    }
    .center-content:first-of-type {
      margin-right: 22px;
    }
  }
  .top-header-right {
    display: flex;
    :deep(.el-tooltip__trigger) {
      cursor: pointer;
      margin-right: 24px;
      display: flex;
      align-items: center;
      img {
        width: 48px;
        vertical-align: middle;
      }
      span {
        background-image: -webkit-linear-gradient(-90deg, #ffffff 39.25%, #2f5bf6 130.65%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
.features {
  position: absolute;
  top: 10%;
  left: 36px;
  background: rgba(50, 51, 53, 0.24);
  //background: #333;
  color: rgba(191, 193, 197, 1);
  text-align: center;
  padding-top: 16px;
  border-radius: 4px;
  .features-item {
    margin: 0 10px 20px;
    font-size: 12px;
    cursor: pointer;
    width: 48px;
    height: 48px;
    background: url(@/assets/image/homeView/bg-circle-icon.png) no-repeat 100% 100%;
    background-size: cover;
    position: relative;
    img {
      width: 38px;
      position: absolute;
      left: 5px;
    }
    p {
      position: absolute;
      bottom: -6px;
      left: -8px;
      color: rgba(191, 193, 197, 1);
      font-size: 14px;
      width: 66px;
    }
  }
  .features-item:nth-of-type(6) {
    img {
      width: 30px;
      left: 9px;
      top: 8px;
    }
  }
}
.chatIcon {
  position: absolute;
  bottom: 50px;
  left: 50px;
  width: 50px;
  cursor: pointer;
  z-index: 999;
}
.chat {
  position: absolute;
  width: 50%;
  height: 100vh;
  background: linear-gradient(
    90deg,
    rgba(24, 24, 24, 0.9) 77.51%,
    rgba(24, 24, 24, 0.765) 83.27%,
    rgba(24, 24, 24, 0.36) 92.94%,
    rgba(24, 24, 24, 0.0705882) 100%
  );
  bottom: 0;
  left: 0;
  padding: 10px 20px;
  border-radius: 4px;
  .left-back {
    width: 170px;
    height: 82px;
    background: url(@/assets/image/homeView/back-bg-img.png) no-repeat 100% 100%;
    background-size: cover;
    cursor: pointer;
    position: absolute;
    left: 0;
    z-index: 999;
    img {
      width: 86px;
      margin-left: 10px;
      margin-top: 16px;
    }
  }
  .chat-content {
    width: 100%;
    height: 100%;
    position: relative;
    .chat-list {
      position: absolute;
      bottom: 60px;
    }
    p {
      line-height: 30px;
      span:first-of-type {
        color: rgba(52, 97, 255, 1);
      }
      span:last-of-type {
        color: #ffffff;
      }
    }
    .chat-input {
      width: 56%;
      position: absolute;
      bottom: 16px;
      display: flex;
      :deep(.el-input) {
        height: 40px;
        margin-right: 10px;
        .el-input__wrapper {
          background: transparent;
          box-shadow: 0 0 0 1px var(--el-text-color-primary, var(--el-text-color-primary)) inset;
          ::-webkit-input-placeholder {
            -webkit-text-fill-color: rgba(100, 102, 107, 1);
          }
        }
      }
      .chat-send {
        height: 40px;
      }
    }
  }
}
.message {
  width: 50%;
  height: 136px;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%);
  background: rgba(24, 24, 24, 0.64);
  border-radius: 4px;
  padding: 20px 22px;
  overflow-y: scroll;
  p {
    line-height: 30px;
    span:first-of-type {
      color: rgba(52, 97, 255, 1);
    }
    span:last-of-type {
      color: #ffffff;
    }
  }
}
.message::-webkit-scrollbar {
  display: none;
}
</style>
<style lang="scss">
.dialog {
  background: rgba(24, 24, 24, 0.88);
  .dialog-search {
    margin-bottom: 10px;
    .el-input {
      height: 30px;
      margin-right: 10px;
      color: #fff;
      .el-input__wrapper {
        background: #666666;
        box-shadow: 0 0 0 1px var(--el-text-color-primary, var(--el-text-color-primary)) inset;
        .el-input__inner {
          color: #fff;
        }
        ::-webkit-input-placeholder {
          -webkit-text-fill-color: rgba(100, 102, 107, 1);
        }
      }
    }
    button:first-of-type {
      background: #2646bb;
      border: none;
      color: #fff;
      height: 28px;
      width: 60px;
    }
    button:last-of-type {
      background: #3c3c3c;
      height: 28px;
      width: 60px;
      border: none;
    }
  }
  .el-table {
    margin-bottom: 20px;
    background: transparent;
    .el-table__header-wrapper {
      .el-table__cell {
        background: rgba(44, 49, 60, 1);
        border-bottom: none;
      }
    }
    .el-table__body-wrapper {
      tr {
        background: transparent;
      }
      .el-table__cell {
        background: rgba(69, 68, 91, 0.32);
        border-bottom: none;
        height: 60px;
        color: rgba(223, 224, 226, 1);
      }
    }
    .el-table__inner-wrapper::before {
      content: none;
    }
  }

  .el-table tbody tr:hover > td {
    background-color: transparent !important;
  }
  .pagination {
    display: flex;
    flex-direction: row-reverse;
    .el-pager {
      .number {
        background: rgba(44, 49, 60, 1);
        color: rgba(213, 214, 217, 1);
      }
      .is-active {
        background: rgba(223, 224, 226, 1) !important;
        color: rgba(50, 51, 53, 1) !important;
      }
    }
    .btn-prev,
    .btn-next {
      background: rgba(44, 49, 60, 1);
      color: rgba(213, 214, 217, 1);
    }
  }
  .dialog-footer {
    button:first-of-type {
      background: #3c3c3c;
      border: none;
      color: #fff;
      height: 28px;
      width: 60px;
    }
    button:last-of-type {
      background: #2646bb;
      height: 28px;
      width: 60px;
      border: none;
    }
  }

}
</style>
